<script setup lang="ts">
import { DataBrowsingTableProps } from "@/views/dataBrowsing/table/types.ts";
import JsonEditorVue from "json-editor-vue";
import { useDark } from "@pureadmin/utils";
import DataBrowsingDetailView from "@/views/dataBrowsing/detail/index.vue";

defineOptions({
	name: "DataBrowsingTableView",
});
const props = withDefaults(defineProps<DataBrowsingTableProps>(), {
	index: () => "",
	hits: () => [],
	loading: () => false,
});
const hits = toRef(props, "hits");
// "_id", "_index", "_score"
const columns = ref<any[]>([]);
const data = ref<any[]>([]);
const loading = toRef(props, "loading");
const description = ref<any>();
const open = ref<boolean>(false);

watch(hits, () => {
	handleColumns();
	handleData();
});

function initColumns() {
	columns.value = [
		{
			title: "_id",
			dataIndex: "_id",
			key: "_id",
			width: 200,
			ellipsis: true,
		},
		{
			title: "_index",
			dataIndex: "_index",
			key: "_index",
			width: 200,
			ellipsis: true,
		},
		{
			title: "_score",
			dataIndex: "_score",
			key: "_score",
			width: 100,
		},
		{
			title: "_source",
			dataIndex: "_source",
			key: "_source",
			ellipsis: true,
		},
		{
			title: "操作",
			dataIndex: "action",
			key: "action",
			width: 100,
		},
	];
}

function handleColumns() {
	initColumns();
	// if (hits.value && hits.value.length > 0) {
	// 	hits.value.forEach((item: any) => {
	// 		if (item["_source"]) {
	// 			const source = item["_source"] as any;
	// 			for (const key in source) {
	// 				columns.value.push({
	// 					title: key,
	// 					dataIndex: key,
	// 					key: key,
	// 				});
	// 			}
	// 		}
	// 	});
	// }
}

function handleData() {
	data.value = [];
	if (hits.value && hits.value.length > 0) {
		hits.value.forEach((item: any) => {
			const dataItem: any = {};
			dataItem["key"] = item["_id"];
			dataItem["_id"] = item["_id"];
			dataItem["_index"] = item["_index"];
			dataItem["_score"] = item["_score"];
			dataItem["_source"] = item["_source"] ? JSON.stringify(item["_source"]) : undefined;
			dataItem["description"] = item;
			data.value.push(dataItem);
		});
	}
}

function onCheckClick(value: any) {
	description.value = value;
	open.value = true;
}

function updateOpen(value: boolean) {
	open.value = value;
}

const rowSelection = ref({
	checkStrictly: false,
	onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
		console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
	},
	onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
		console.log(record, selected, selectedRows);
	},
	onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
		console.log(selected, selectedRows, changeRows);
	},
});

onMounted(function () {
	handleColumns();
	handleData();
});
</script>

<template>
	<div class="data-browsing-table-view">
		<a-table
			:columns="columns"
			:data-source="data"
			:row-class-name="() => 'data-browsing-table-item'"
			:pagination="false"
			:loading="loading"
			:expand-column-width="69"
			:row-selection="rowSelection"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-button type="link" @click="onCheckClick(record.description)">详情</a-button>
				</template>
			</template>
		</a-table>
		<data-browsing-detail-view :detail="description" :open="open" @update-open="updateOpen" />
	</div>
</template>

<style scoped lang="scss">
.data-browsing-table-view {
	height: 100%;
	width: 100%;
}
.data-browsing-table-item {
	// 不显示换行符
	white-space: pre;
}
</style>
